<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HexoPress</title>
  </head>
  <body>
    <div id="app">
      <style>
        .app-loading {
          display: flex;
          width: 100%;
          height: 100%;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background: #f0f2f5;
        }
        .app-loading .app-loading-wrap {
          position: absolute;
          top: 50%;
          left: 50%;
          display: flex;
          -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }
        .loading {
          width: 30px;
          height: 30px;
          border: 2px solid #000;
          border-top-color: transparent;
          border-radius: 100%;

          animation: circle infinite 0.75s linear;
        }

        @keyframes circle {
          0% {
            transform: rotate(0);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      </style>
      <div class="app-loading">
        <div class="loading app-loading-wrap"></div>
      </div>
    </div>
    <script type="module" src="/src/renderer.ts"></script>
  </body>
</html>
